<script setup>
import { useRouter, useRoute } from 'vue-router';
import { computed } from 'vue';

const router = useRouter();
const route = useRoute();

// 获取子路由
const salesRoutes = computed(() => {
  return router.options.routes.find(r => r.path === '/sales')?.children || [];
});

// 如果当前路径只是 /sales，默认重定向到第一个子路由
if (route.path === '/sales' && salesRoutes.value.length > 0) {
  router.push(`/sales/${salesRoutes.value[0].path}`);
}
</script>

<template>
  <div class="sales-container">
    <div class="page-header">
      <h1 class="page-title">销售管理</h1>
    </div>
    
    <div class="card">
      <div class="sales-nav">
        <router-link 
          v-for="subRoute in salesRoutes" 
          :key="subRoute.path"
          :to="`/sales/${subRoute.path}`"
          class="sales-nav-item"
          :class="{ active: route.path.includes(subRoute.path) }"
        >
          {{ subRoute.meta?.title }}
        </router-link>
      </div>
      
      <div class="sales-content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<style scoped>
.sales-container {
  width: 100%;
}

.sales-nav {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  padding: 0 20px;
}

.sales-nav-item {
  padding: 12px 16px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-right: 8px;
}

.sales-nav-item.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.sales-content {
  padding: 20px;
}
</style> 